<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="shared/css_js::header">
    <title>门 店</title>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
</head>
<body>
<nav th:replace="shared/foot :: foot" class="mui-bar mui-bar-tab">
</nav>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">门店</h1>
</header>
<div class="mui-content">
    <div class="weui-flex">
        <!--<div class="weui-flex__item" style="flex-grow: 2;position: relative">-->
            <!--<a href="#" style="color: black;position: absolute;top:10%;text-align: center;left:20%">-->
                <!--<p>广州<span class="mui-icon mui-icon-arrowdown"></span></p>-->
            <!--</a>-->
        <!--</div>-->
        <div class="weui-flex__item" style="flex-grow: 1;text-align: center;position: relative">
            <span onclick="checklocation()" class="fa fa-map-marker" style="position: absolute;top:20%;"></span>
        </div>
        <div class="weui-flex__item" style="margin-left: 10px;flex-grow:6;position: relative;height: 35px">
            <div class="weui-search-bar" id="searchBar" style="padding: 0;height: 30px">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                </form>
            </div>
        </div>
        <div class="weui-flex__item" style="flex-grow: 1;text-align: center;position: relative">
            <a onclick="shopsearch()" style="width: 40px"><p style="margin-top: 5px"> 搜索 </p></a>
            <!--<span onclick="checkmap()" class="fa fa-location-arrow" style="position: absolute;top:20%;right:30%"></span>-->
        </div>
    </div>
    <div class="weui-flex" style="border-bottom:1px solid #c8c7cc;background-color: white">
        <div class="weui-flex__item" style="border-right:1px solid #c8c7cc;">
            <div class="weui-cell" id="aaa" href="javascript:;" style="padding: 0 5px">
                <!--addcode为地址编码,ar为地址字符串-->
                <input type="text" th:attr="data-code=${area}" th:value="${ar}" id='area' style="border: none;margin:0;padding:0;font-size: 14px;width: 140px" readonly="readonly" />
            </div>
        </div>
        <div class="weui-flex__item" style="border-right:1px solid #c8c7cc">
            <div class="weui-cell" id="bbb" href="javascript:;" style="padding: 0 5px;width: 100%;">
                <input th:if="${setshoptype==null}" id="shoptype" type="text" th:attr="data-values=2" value="全部门店" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <input th:if="${setshoptype!=null}" id="shoptype" type="text" th:attr="data-values=${shoptype}" th:value="${setshoptype}" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <span class="mui-icon mui-icon-arrowdown"></span>
            </div>
        </div>
        <div class="weui-flex__item">
            <div class="weui-cell" id="ccc" href="javascript:;" style="padding: 0 5px;width: 100%;">
                <input th:if="${settype==null}" id="type" type="text" th:attr="data-values=1" value="默认排序" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <input th:if="${settype!=null}" id="type" type="text" th:attr="data-values=${type}" th:value="${settype}" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <span class="mui-icon mui-icon-arrowdown"></span>
            </div>
        </div>
    </div>

    <div class="weui-flex" th:if="${#lists.isEmpty(shoplist)}">
        <p style="margin-left: 150px"><span>暂无门店</span></p>
    </div>

    <ul class="mui-table-view">
        <li th:each="shoplist:${shoplist}" class="mui-table-view-cell mui-media" >
            <a th:if="${shoplist.isbook==1}" th:href="@{/shopdetail(chnid=${shoplist.chnid})}" style="padding-right: 5px">
                <img class="mui-media-object mui-pull-left" th:src="@{'/common/image?filename='+${shoplist.picurl}}" style="max-width:70px;height: 70px "/>
                <div class="mui-media-body">
                    <p class="shopname" th:text="${shoplist.chnname}">
                    </p>
                    <p >评价 <span class='com' style="color: black" th:text="${shoplist.com==null?'暂无':#numbers.formatDecimal(shoplist.com, 0, 2)}"></span> | <span style="color: black" th:text="${shoplist.num}" ></span>单</p>
                    <div class="weui-flex">
                        <div class="weui-flex__item" >
                            <p style="width: 200px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; " th:text="${shoplist.addr}"></p>
                        </div>
                        <div class="weui-flex__item" >
                            <p th:if="${shoplist.distance!=null}" class="mui-pull-right" th:text="${shoplist.distance/10+'KM'}"></p>
                        </div>
                    </div>
                </div>
            </a>
            <!--不可预约的门店-->
            <a th:if="${shoplist.isbook==0}" th:href="@{/shopdetail(flag=1,chnid=${shoplist.chnid})}">
                <img class="mui-media-object mui-pull-left" th:src="@{'/common/image?filename='+${shoplist.picurl}}" style="max-width:70px;height: 70px "/>
                <div class="mui-media-body">
                    <p class="shopname" th:text="${shoplist.chnname}">
                    </p>
                    <p >评价 <span class='com' style="color: black" th:text="${shoplist.com==null?'暂无':#numbers.formatDecimal(shoplist.com, 0, 2)}"></span> | <span style="color: black" th:text="${shoplist.num}" ></span>单</p>
                    <p>
                        <span style="white-space: nowrap" th:text="${shoplist.addr}"></span>
                    </p>
                </div>
            </a>
        </li>
    </ul>
</div>
<!--&lt;!&ndash;微信token数据&ndash;&gt;-->
<!--<input id="accesstoken" type="hidden" th:value="${accesstoken}"/>-->
<!--<input id="appId" type="hidden" th:value="${appId}"/>-->
<!--<input id="timestamp" type="hidden" th:value="${timestamp}"/>-->
<!--<input id="nonceStr" type="hidden" th:value="${nonceStr}"/>-->
<!--<input id="signature" type="hidden" th:value="${signature}"/>-->
<input id="lat" type="hidden" th:value="${lat}"/>
<input id="lon" type="hidden" th:value="${lon}"/>

<!--地图-->
<div id="map" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">

        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
            <h1 class="mui-title">当前位置</h1>
        </header>
        <div class="mui-content">
            <div id="container" style="width:500px; height:550px"></div>
        </div>
    </div>
</div>
<!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>-->
<script th:src="@{/js/weuijs/city-picker.js}" type="text/javascript"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=e001d49f941c6992e70edd5322efbcb6&plugin=AMap.Geocoder"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
//    var baseUrl="http://api.ocr.ikartek.com/api/ocr/ocrvehicle";
    /*获取基础access_token接口*/
//    wx.config({
//        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//        appId: $("#appId").val(), // 必填，公众号的唯一标识
//        timestamp:$("#timestamp").val() , // 必填，生成签名的时间戳
//        nonceStr: $("#nonceStr").val(), // 必填，生成签名的随机串
//        signature: $("#signature").val(),// 必填，签名，见附录1
//        jsApiList: [ 'openLocation', 'getLocation','chooseLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//    });

//    function checklocation() {
//        wx.chooseLocation({ success: function(res) {
//            var latitude = res.latitude;
//            var longitude = res.longitude;
//            var name = res.name;
//            var address = res.address;
//           alert(latitude+" "+longitude+" "+name+" "+address);
//        },
//            error: function (res) {
//                alert('获取位置信息失败,请重试');
//            },
//            cancel: function (res) {
//                alert('用户拒绝授权获取地理位置');
//            }
//        });
//    }
    
//    function checkmap() {
//        $.openPopup("#map");
//        var lat= $("#lat").val();
//        var lon= $("#lon").val();
//        var map = new AMap.Map('container', {
//            resizeEnable: true,
//            zoom:15,
//            center: [lon, lat]
//        });
//        marker = new AMap.Marker({
//            position: [lon, lat],
//            title: '当前位置',
//            map: map
//        });
//    }

//    // 获取用户位置(通过用户经纬度获得省市区和地址编码)
//    function getlocation(){
//       var lat= $("#lat").val();
//       var lon= $("#lon").val();
//       var lnglatXY=[lon,lat];
//        var geocoder = new AMap.Geocoder({
//            radius: 1000,
//            extensions: "all"
//        });
//        geocoder.getAddress(lnglatXY, function(status, result) {
//            if (status === 'complete' && result.info === 'OK') {
//                $("#area").val(result.regeocode.addressComponent.province+" "+result.regeocode.addressComponent.city+" "+result.regeocode.addressComponent.district);
//                $("#area").attr("data-code",result.regeocode.addressComponent.adcode);
//            }
//        });
//
//    }
    
    function shopsearch() {
        var search=$("#searchInput").val();
        var area=$("#area").data('code');
        var shoptype=$("#shoptype").data('values');
        var type=$("#type").data('values');
        var ar=$("#area").val();
        location.href="/shop?shoptype="+shoptype+"&type="+type+"&area="+area+"&ar="+ar+"&search="+search;
    }

    //post提交
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }
    
    function checklocation() {
        $.showLoading("正在定位中...");
        var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 4000,          //超过X秒后停止定位，默认：无穷大
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation , 'complete',onComplete); //定位成功后的回调函数
            AMap.event.addListener(geolocation, 'error', onError);
        });
        function onComplete(data) {
            var lon=data.position.getLng();
            var lat=data.position.getLat();
//            var address=data.addressComponent.province+" "+data.addressComponent.city+" "+data.addressComponent.district;
            var address=data.addressComponent.district==""?data.addressComponent.province+" "+data.addressComponent.city+" "+data.addressComponent.city:data.addressComponent.province+" "+data.addressComponent.city+" "+data.addressComponent.district;
            var adcode=data.addressComponent.adcode;
            var olat= $("#lat").val();
            var olon= $("#lon").val();
            if(olat!=lat||olon!=lon){
                mui.ajax('/savelocation',{
                    data:{
                        lat:lat,
                        lon:lon,
                        address:address,
                        adcode:adcode
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'get',//HTTP请求类型
                    success:function(json) {
                    }
                })
            }
            location.href="/shop";
        }
        //解析定位错误信息
        function onError(data) {
            $.hideLoading();
//            switch(data.info) {
//                case 'PERMISSION_DENIED':
//                    alert('浏览器阻止了定位操作');
//                    break;
//                case 'POSITION_UNAVAILBLE':
//                    alert('无法获得当前位置');
//                    break;
//                case 'TIMEOUT':
//                    alert('定位超时');
//                    break;
//                default:
//                    alert('定位失败 请开启定位服务后重试');
//                    break;
//            }
        }
    }
    window.onload=function () {
        var lat=$("#lat").val();
        if(lat==""){
            checklocation()
        }
    }
    /*]]>*/
</script>

<script th:inline="javascript">
    /*<![CDATA[*/
    $("#area").cityPicker({
        title: "请选择",
        onClose:function () {
            var area=$("#area").data('code');
            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var ar=$("#area").val();
            location.href="/shop?shoptype="+shoptype+"&type="+type+"&area="+area+"&ar="+ar
        }
    });

    $("#shoptype").select({
        title: "选择门店类型",
        items: [
            {
                title: "全部门店",
                value: "2"
            },
            {
                title: "可预约",
                value: "1"
            },
            {
                title: "不可预约",
                value: "0"
            }
        ],
        onClose:function () {
            var area=$("#area").data('code');
            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var ar=$("#area").val();
            location.href="/shop?shoptype="+shoptype+"&type="+type+"&area="+area+"&ar="+ar
        }
    });
    $("#bbb").click(function () {
        $("#shoptype").select("open");
    });
    $("#type").select({
        title: "选择类型",
        items: [
            {
                title: "默认排序",
                value: "1"
            },
            {
                title: "附近优先",
                value: "2"
            },
            {
                title: "评分最高",
                value: "3"
            },
            {
                title: "服务次数",
                value: "4"
            }
        ],
        onClose:function () {
            var area=$("#area").data('code');
            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var ar=$("#area").val();
            location.href="/shop?shoptype="+shoptype+"&type="+type+"&area="+area+"&ar="+ar
        }
    });
    $("#ccc").click(function () {
        $("#type").select("open");
    });
    /*]]>*/
</script>

</body>

</html>